<div class="login-main">
    <div class="login-box">
        {if check_login_type('qrcode')}
        <div class="ewm login-method"  data-type="scan">
            <div>微信扫码登录</div>
            <span class="iconfont" id="ewm">&#xe678;</span>
        </div>
        {/if}
        <div class="password-login">
            <div class=" login-method" data-type="normal">
                <div>密码登录</div>
                <span class="iconfont" id="password-login" >&#xe679;</span>
            </div>
        </div>
    </div>
    <div class="normal-login need-captcha">
        <ul class="nav nav-tabs">
            <li class="active login-method-password">
                <a data-toggle="tab" href="#password" data-login-type="password">密码登录</a>
                <div class="underline active"></div>
            </li>
            <li class="login-method-captcha">
                <a data-toggle="tab" href="#shortmessage" data-login-type="captcha">验证码登录</a>
                <div class="underline"></div>
            </li>

        </ul>
        <form action="{:url('ucenter/Common/login')}" class="ajax_form" method="post">
            <input type="hidden" name="login_type" value="password">
            <div class="tab-content">
                <div class="tab-pane active" id="password">
                    <div class="login-group">
                        <input class="login-input login-account" name="account" placeholder="{$ph_account}" type="text" autocomplete="on">
                    </div>
                    <div class="login-group password-group">
                        <input class="login-input"  name="password" placeholder="请输入密码" type="password" autocomplete="off">
                        <i class="iconfont" data-type="hidden">&#xe67a;</i>
                    </div>
                    {if check_verify_open('login')}
                    <div class="login-group captcha-img">
                        <input type="text"  class="login-input" placeholder="验证码" datatype="*5-5" name="captcha" autocomplete="off">
                        <img class="verifyimg reloadverify" alt="刷新验证码" src="{:captcha_src()}"
                             style="cursor:pointer;height:43px;max-width: 100%">
                    </div>
                    {/if}
                </div>

                <div class="tab-pane" id="shortmessage">
                    <div class="login-group">
                        <input class="login-input" name="account" placeholder="{$ph_account}" type="text">
                    </div>
                    <div class="login-group captcha-sms">
                        <input class="login-input" name="verify" placeholder="请输入验证码"
                               type="text">
                        <button class="captcha-code margin-bottom-10" type="button" >获取验证码</button>
                    </div>
                </div>
            </div>

            <div class="login-opt clearfix">
                <div class="remember-me checkbox-primary">
                    <input type="checkbox" name="remember" value="1" class="remember" id="remberMe">
                    <label for="remberMe">记住我</label>
                </div>
                <div class="forget text-right">
                    <a class="" href="{:url('ucenter/Common/mi')}"
                       style="color: #666666;font-size: 14px;">忘记密码</a>
                </div>
            </div>
            {php}
            if(!empty($_SERVER['HTTP_REFERER'])){
            $referer = $_SERVER['HTTP_REFERER'];
            }else{
            $referer = url('index/index/index');
            }
            session('login_http_referer',$referer);
            {/php}
            <input name="from" type="hidden" value="{$referer}">
            <div class="form-group">
                <input type="hidden" name="channel" value="pc" />
                <button class="btn btn-block btn-login btn-lg" type="submit"> 登 录</button>
            </div>
        </form>
    </div>

    <div class="ewm-login">
        <h3>微信扫码登录</h3>
        <div>
            <img alt="" class="wechat-qrcode" src=""/>
            <div class="blur hidden">
                <img alt="" src="__STATIC__/common/images/check_success.png">
                <span>扫码成功</span>
            </div>
        </div>
        <p class="scan-status">请使用微信扫描二维码登录</p>
        <a class="reset-qrcode hidden">重新生成</a>
    </div>
    
    <div class="register-section">
        还没有账号? <a class="" href="{:url('ucenter/common/register',array('type'=>'mobile'))}">立即注册</a>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        //登录方式切换
        $('.nav-tabs').on('shown.zui.tab', function(e) {
            //更改下划线位置
            $(e.currentTarget).children('.underline').removeClass('active');
            $(e.target).parent().children('.underline').addClass('active')
            //更新登录类型
            var loginType = $(e.target).data('login-type');
            $('[name="login_type"]').val(loginType);
        });

        /**
         * 登录
         */
        $("form").submit(function (e) {
            e.preventDefault();
            toast.showLoading();
            $('form').find('div:hidden').find(':input').attr('disabled', 'disabled');
            var self = $(this);
            $.post(self.attr("action"), self.serialize(), success, "json");
            return false;

            function success(data) {
                handle_ajax(data);
                toast.hideLoading();
            }
        });

        var verifyimg = $(".verifyimg").attr("src");
        $(".reloadverify").click(function () {
            if (verifyimg.indexOf('?') > 0) {
                $(".verifyimg").attr("src", verifyimg + '&random=' + Math.random());
            } else {
                $(".verifyimg").attr("src", verifyimg.replace(/\?.*$/, '') + '?' + Math.random());
            }
        });

        //扫码回调
        scan_qrcode.callback = function () {
            $('.ewm-login .blur').removeClass('hidden');
            $('.ewm-login .reset-qrcode').removeClass('hidden');
            scan_qrcode.login();
        }
        $("#password-login").click(function () {
            $(".ewm").show();
            $(".normal-login").show();
            $(".password-login").hide();
            $(".ewm-login").hide();
        });
        $("#ewm").click(function () {
            $('.ewm-login .blur').addClass('hidden');
            $('.ewm-login .reset-qrcode').addClass('hidden');
            $(".ewm").hide();
            $(".normal-login").hide();
            $(".password-login").show();
            $(".ewm-login").show();
            //显示二维码
            scan_qrcode.initWechatQrcode('.wechat-qrcode');
            //查询扫码状态
            scan_qrcode.hasScan();
        });

        $('.ewm-login .reset-qrcode').click(function () {
            //扫码登录
            scan_qrcode.initWechatQrcode('.wechat-qrcode');
            //查询扫码状态
            scan_qrcode.hasScan();
            $('.ewm-login .blur').addClass('hidden');
            $('.ewm-login .reset-qrcode').addClass('hidden');
        })

        //控制密码显示/隐藏
        $(".password-group").on("click", ".iconfont", function () {
            let type = $(this).data('type');
            console.log(type)
            if (type == 'hidden') {
                $(this).data('type', 'show');
                $(this).html('&#xe6b1;');
                $(this).prev().attr("type", "text");
            } else {
                $(this).data('type', 'hidden');
                $(this).html('&#xe67a;');
                $(this).prev().attr("type", "password");
            }
        });
        
        /**
         * 获取验证码
         */
        $('.need-captcha').on('click','.captcha-code',function () {
            var isIng = $(this).hasClass('ing');//是否获取中
            var s = 60;//重新获取时常
            var elem = $(this);
            if (!isIng){
                var account = $(this).parents('.tab-pane').find('[name="account"]').val();
                var type = isEmailAvailable(account) ? 'emall' : 'mobile';
                $.post('{:url("api/verify/send")}' ,{type:type ,account:account} ,function (result) {
                    if (result.code == 200){
                        $(elem).addClass('ing');
                        var timer = setInterval(function () {
                            if (s > 0){
                                $(elem).text(`重新获取(${s}s)`)
                                s--;
                            }else{
                                $(elem).removeClass('ing');
                                clearInterval(timer)
                                s = 60;
                                $(elem).text(`重新获取`)
                            }
                        },1000)
                    }else{
                        if (typeof result.msg == "object"){
                            toast.error(result.msg.Message);
                        }else{
                            toast.error(result.msg);
                        }
                    }
                })
            }
        })

        function isEmailAvailable(emailInput) {
            var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
            if (!myreg.test(emailInput)) {
                return false;
            }
            else {
                return true;
            }
        }

        //忘记密码
        $(document).ready(function() {
            $(".login-method-captcha").click(function() {
                $("#forgetpassword").hide();
            });
            $(".login-method-password").click(function() {
                $("#forgetpassword").show();
            });
        });
    });
</script>